
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>用AI来优化简历 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>用AI来优化简历 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">文档中描述的AI简历优化流程包含哪四个主要步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 准备个人资料并与提示词一同提供给大模型；2. 使用特定的提示词生成HTML格式的简历；3. 保存并用浏览器预览生成的HTML文件；4. 使用CloudConvert等工具将HTML文件转换为专业的PDF文档。</div>
          </div>
          <div class="card-source">来源: AI简历优化流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在优化简历内容时，文档强调应运用哪两种框架来描述项目和实习经历？它们的作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档强调应运用 STAR (Situation, Task, Action, Result) 和 PAR (Problem, Action, Result) 框架。它们的作用是确保每项经历都具备最大影响力和可量化的成果。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 1.1 基础认知</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">根据简历输出标准的“基础层”要求，一份AI生成的HTML简历必须包含哪些核心要素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">必须包含的核心要素有：个人信息（姓名、联系方式、GitHub/LinkedIn链接）、教育背景、核心技能、项目经验、实习经历、奖项荣誉、技术认证、未来发展规划，以及一份精炼的自我介绍。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 3.1 基础层</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中的提示词定义了一个“迭代优化循环”来创建简历，这个循环包含哪些阶段？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">这个循环包含六个阶段：理解 (Understand) → 设计 (Design) → 注入 (Inject) → 涌现 (Emerge) → 优化 (Optimize) → 再思考 (Rethink)。这个过程会持续进行，直到简历达到极致的说服力和影响力。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 2.2 迭代优化循环</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">简历输出标准的“突破层”提出了哪些策略来强化“亮点”并“打动面试官”？请列举至少三项。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">策略包括：1. 在简历顶部设计一个“核心竞争力概览”；2. 项目经验部分集成微型交互，如链接到GitHub或在线Demo；3. 尽可能将所有成就都用具体数据量化；4. 创建专门的“未来发展”小节，展示学习计划和职业目标；5. 突出展示技术认证与竞赛成果。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 3.3 突破层</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档推荐使用什么工具将HTML简历转换为PDF？并说明了该方法相比浏览器直接打印的优势。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档推荐使用CloudConvert平台。其优势在于可以更好地处理CSS样式、保持字体一致性，并提供比直接从浏览器打印更专业的输出质量。</div>
          </div>
          <div class="card-source">来源: 4、 将HTML转换为PDF</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在AI的“专业认知体系”中，“涌现认知”具体指什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“涌现认知”是指AI应具备的能力，包括：1. 识别并放大候选人潜在的“独特卖点”；2. 创新性地将“作品集思维”融入简历结构；3. 探索通过布局和色彩等方式建立“情感链接”，以传达候选人的热情和专业度。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 1.3 涌现认知</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在最终提交简历前，文档中的“完整性检查”部分要求必须检查哪几项关键信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">必须检查：1. 所有工作经历是否包含完整信息（公司名称、职位、时间段）；2. 项目描述是否遵循STAR/PAR框架；3. 联系方式是否准确无误；4. 视觉设计是否一致和专业。</div>
          </div>
          <div class="card-source">来源: 实用技巧 - 完整性检查</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">AI提示词的“创新空间”部分提到了哪些可以超越传统简历形式的创意想法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">创意想法包括：根据候选人的项目自动生成引人入胜的“项目故事提炼”；探索一种“技能矩阵热力图”来直观展示技能的广度和深度；在简历中加入一个“隐藏的彩蛋”以展现候选人的细节关注度。</div>
          </div>
          <div class="card-source">来源: 2、使用提示词生成HTML简历 - 2.3 创新空间</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
